検証を含むフォームを作成する

コンテンツ

アプリでは多くの場合、ユーザーがテキストフィールドに情報を入力する必要があります。たとえば、ユーザーに電子メールアドレスでのログインを要求する場合があります。とパスワードの組み合わせ。

アプリを安全かつ使いやすくするには、ユーザーが提供した情報は有効です。ユーザーが正しく入力した場合フォームから出力し、情報を処理します。ユーザーが間違って送信した場合情報を提供し、何が起こったのかを知らせるわかりやすいエラーメッセージを表示します。間違い。

この例では、次のようなフォームに検証を追加する方法を学びます。次の手順を使用して、単一のテキストフィールドを作成します。

を作成しますFormとともにGlobalKey。
追加TextFormField検証ロジックを使用します。
フォームを検証して送信するためのボタンを作成します。

1.`Form`とともに`GlobalKey`

まず、Form。のFormウィジェットはグループ化のコンテナとして機能します複数のフォームフィールドを検証します。

フォームを作成するときに、GlobalKey。これにより、Form、これにより、後のステップでフォームを検証できるようになります。

import 'package:flutter/material.dart';

// Define a custom Form widget.
class MyCustomForm extends StatefulWidget {
  const MyCustomForm({super.key});

  @override
  MyCustomFormState createState() {
    return MyCustomFormState();
  }
}

// Define a corresponding State class.
// This class holds data related to the form.
class MyCustomFormState extends State<MyCustomForm> {
  // Create a global key that uniquely identifies the Form widget
  // and allows validation of the form.
  //
  // Note: This is a `GlobalKey<FormState>`,
  // not a GlobalKey<MyCustomFormState>.
  final _formKey = GlobalKey<FormState>();

  @override
  Widget build(BuildContext context) {
    // Build a Form widget using the _formKey created above.
    return Form(
      key: _formKey,
      child: const Column(
        children: <Widget>[
          // Add TextFormFields and ElevatedButton here.
        ],
      ),
    );
  }
}

2. を追加します。`TextFormField`検証ロジックあり

とはいえ、Form所定の位置にあり、ユーザーがテキストを入力する方法はありません。それはある人の仕事ですTextFormField。のTextFormFieldウィジェットはマテリアルデザインのテキストフィールドをレンダリングします検証エラーが発生した場合にはそれを表示できます。

を提供して入力を検証します。validator()に機能するTextFormField。ユーザーの入力が無効な場合は、のvalidator関数は次の値を返しますString含むエラーメッセージが表示されます。エラーがない場合、バリデータは null を返す必要があります。

この例では、validatorそれはTextFormField空いてないよ。空いている場合は、わかりやすいエラーメッセージを返します。

TextFormField(
  // The validator receives the text that the user has entered.
  validator: (value) {
    if (value == null || value.isEmpty) {
      return 'Please enter some text';
    }
    return null;
  },
),

3. フォームを検証して送信するボタンを作成します。

これでテキストフィールドのあるフォームができました。ユーザーがタップして情報を送信できるボタンを提供します。

ユーザーがフォームを送信しようとすると、フォームが有効かどうかを確認します。成功した場合は、成功メッセージを表示します。そうでない場合 (テキストフィールドに内容がない場合)、エラーメッセージが表示されます。

ElevatedButton(
  onPressed: () {
    // Validate returns true if the form is valid, or false otherwise.
    if (_formKey.currentState!.validate()) {
      // If the form is valid, display a snackbar. In the real world,
      // you'd often call a server or save the information in a database.
      ScaffoldMessenger.of(context).showSnackBar(
        const SnackBar(content: Text('Processing Data')),
      );
    }
  },
  child: const Text('Submit'),
),

これはどのように作動しますか？

フォームを検証するには、_formKeyに作成されましたステップ 1._formKey.currentState()にアクセスする方法FormState、これは、ビルド時に Flutter によって自動的に作成されます。Form。

のFormStateクラスに含まれるのはvalidate()方法。ときvalidate()メソッドが呼び出されると、validator()フォーム内の各テキストフィールドの関数。すべてが良好に見える場合は、validate()メソッドの戻り値true。テキストフィールドにエラーが含まれている場合、validate()方法フォームを再構築してエラーメッセージを表示し、戻り値を返します。false。

インタラクティブな例

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    const appTitle = 'Form Validation Demo';

    return MaterialApp(
      title: appTitle,
      home: Scaffold(
        appBar: AppBar(
          title: const Text(appTitle),
        ),
        body: const MyCustomForm(),
      ),
    );
  }
}

// Create a Form widget.
class MyCustomForm extends StatefulWidget {
  const MyCustomForm({super.key});

  @override
  MyCustomFormState createState() {
    return MyCustomFormState();
  }
}

// Create a corresponding State class.
// This class holds data related to the form.
class MyCustomFormState extends State<MyCustomForm> {
  // Create a global key that uniquely identifies the Form widget
  // and allows validation of the form.
  //
  // Note: This is a GlobalKey<FormState>,
  // not a GlobalKey<MyCustomFormState>.
  final _formKey = GlobalKey<FormState>();

  @override
  Widget build(BuildContext context) {
    // Build a Form widget using the _formKey created above.
    return Form(
      key: _formKey,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          TextFormField(
            // The validator receives the text that the user has entered.
            validator: (value) {
              if (value == null || value.isEmpty) {
                return 'Please enter some text';
              }
              return null;
            },
          ),
          Padding(
            padding: const EdgeInsets.symmetric(vertical: 16),
            child: ElevatedButton(
              onPressed: () {
                // Validate returns true if the form is valid, or false otherwise.
                if (_formKey.currentState!.validate()) {
                  // If the form is valid, display a snackbar. In the real world,
                  // you'd often call a server or save the information in a database.
                  ScaffoldMessenger.of(context).showSnackBar(
                    const SnackBar(content: Text('Processing Data')),
                  );
                }
              },
              child: const Text('Submit'),
            ),
          ),
        ],
      ),
    );
  }
}

これらの値を取得する方法については、を確認してください。テキストフィールドの値を取得するレシピ。